<template>
	<view class="containor">
		<search></search>
		<view class="box">
			<scroll-view scroll-y="true"  class="container_left" :style="{height:wh + 'px'}">
				<block v-for="(item,index) in categoriesData" :key="index">
					<view :class="['container_left_item',active == index ? 'active':'']" @click="activeItem(index)">{{item.cat_name}}</view>
				</block>
			</scroll-view>
			<scroll-view scroll-y="true" class="container_right" :style="{height:wh + 'px'}" :scroll-top="scrollTop">
				<block  v-for="(item,index) in categoriesLevelTwoData" :key="index">
					<view class="container_right_title">/{{item.cat_name}}/</view>
					<view class="container_right_List">
						<view class="container_right_ListItem" v-for="(item2,index2) in item.children" :key="index2" @click="goGoodsList(item2)">
							<image src="../../static/my-icons/icon3.png" mode=""></image>
							<view class="container_right_ListItem_text">{{item2.cat_name}}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {categoriesData} from '@/API/cate_request.js'
	export default {
		data() {
			return {
				categoriesData:[],//一级数据初始值
				wh:0,//scroll容器动态的高度
				active:0,//选中样式 作为三元运算符判断的条件
				categoriesLevelTwoData:[],//二级数据初始值
				scrollTop:0//scroll容器距离上面的距离
			};
		},
		onLoad(){
			this.getCategoriesData();//页面加载完成时 发送一级数据网络请求
			const System = uni.getSystemInfoSync();//获取uni-app容器可用高度
			this.wh = System.windowHeight - 50;//赋值
		},
		methods:{
			async getCategoriesData(){
				// 发送网络请求
				let {data:res} = await categoriesData();
				// 判断一下是否请求成功
				if(res.meta.status !== 200) return uni.$showMsg();
				// 赋初始值
				this.categoriesData = res.message;
				console.log(this.categoriesData);
				// 赋初始值
				this.categoriesLevelTwoData =  this.categoriesData[0].children;
			},
			activeItem(index){
				// es6解构赋值简写方式 将active的值赋给index 让他一直为0
				this.active = index;
				// 将点击的左侧数据index传入 重新赋给categoriesData[index],children 实现点击左侧不同数据 右侧渲染不同的数据
				this.categoriesLevelTwoData = this.categoriesData[index].children;
				// 如果scrollTop为 0 就让他等于 1 否则就为 0 让他有个变换的动作 如果一直是 0 不变化 是不会生效的
				// 可以理解为如果他距离顶部的距离为 0 的话给他重新赋值为 1 如果不为 0 的话赋值为 0 让他有个变化的动作 否则这个赋值无效
				this.scrollTop = this.scrollTop === 0 ? 1 : 0;
			},
			goGoodsList(item2){
				// item2传递进来 用来传参
				uni.navigateTo({
					url:'/subPackages/floor_details/floor_details?cat_id=' + item2.cat_id
				})
			}
		},
		// 测试一下
	}
</script>

<style lang="scss">
.containor{
	width: 100%;
		.box{
			display: flex;
			width: 100%;
			.container_left{
				width: 30%;
				background-color: #f7f7f7;
				.container_left_item{
					color: black;
					line-height: 100rpx;
					font-size: 30rpx;
					text-align: center;
					&.active{
						background-color: #FFFFFF;
						position: relative;
						&::before{
							content: "";
							display: block;
							width: 6rpx;
							height: 60rpx;
							background-color: #f00000;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}
			.container_right{
				width: 70%;
				.container_right_title{
					text-align: center;
					font-size: 30rpx;
					padding: 10rpx;
					line-height: 100rpx;
					font-weight: bold;
				}
				.container_right_List{
					display: flex;
					flex-wrap: wrap;
					width: 100%;
					.container_right_ListItem{
						width: 33%;
						height: 150rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-wrap: wrap;
						image{
							width: 100rpx;
							height: 100rpx;
						}
						.container_right_ListItem_text{
							width: 100%;
							font-size: 30rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>
